<template>
    <view class="signList">
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :auto-clean-list-when-reload="false"
            :auto-scroll-to-top-when-reload="false"
            safe-area-inset-bottom
            bg-color="#FFF"
            empty-view-img="/static/img/default/Missingdata.png"
            empty-view-text="暂无内容"
            :refresher-status.sync="refresherStatus"
            auto-scroll-to-top-when-reload
            v-model="dataList"
            @query="queryList"
        >
            <view
                class="top flex_wrap row_middle row_between"
                :style="{
                    backgroundImage: `url(${detailDate.background})`,
                }"
            >
                <view class="flex_wrap row_middle pepole">
                    <view class="flex_wrap flex_column left">
                        <view
                            ><u--text
                                :text="`${detailDate.name}总人数`"
                                color="#FFF"
                                size="24rpx"
                        /></view>
                        <view
                            ><u--text
                                :text="total"
                                color="#FFF"
                                size="64rpx"
                                bold
                        /></view>
                    </view>
                </view>
            </view>
            <view class="scrollViews">
                <view class="search">
                    <u-search
                        placeholder="请输入关键字"
                        v-model="keyword"
                        bgColor="#E1E1E1"
                        color="#333"
                        placeholderColor="#999999"
                        clearabled
                        height="64rpx"
                        @custom="keywordSearch"
                        :actionStyle="actionStyle"
                    />
                </view>

                <!-- 业务员列表 type1 -->
                <view v-if="type == 1">
                    <view
                        v-for="(item, index) in dataList"
                        :key="index"
                        :data-id="item.id"
                        class="else_enterprise"
                    >
                        <view @click="toAdvisor(item)">
                            <view class="adviser_else">
                                <view>
                                    <u-text
                                        :text="item.salesmanName"
                                        color="#333"
                                        size="40rpx"
                                        bold
                                        margin="4rpx 0 0 0"
                                    />
                                    <u-text
                                        :text="item.postName"
                                        color="#666"
                                        size="26rpx"
                                    />
                                </view>
                                <view class="el_adviser_info_info">
                                    <image
                                        class="el_adviser_info_img"
                                        :src="item.avatar || MissingAvatar"
                                        mode=""
                                    ></image>
                                    <u-icon
                                        name="arrow-right"
                                        color="#588BF3 "
                                        width="4rpx"
                                        height="36rpx"
                                    ></u-icon>
                                </view>
                            </view>
                        </view>
                        <view class="flex_wrap">
                            <text class="list1" @click="goToList(3, item)"
                                >签到列表</text
                            >
                            <text class="list2" @click="goToList(2, item)"
                                >报名列表</text
                            >
                        </view>
                    </view>
                </view>
                <view v-else>
                    <view
                        class="item flex_wrap flex_column"
                        v-for="(item, index) in dataList"
                        :key="index"
                    >
                        <view>
                            <view class="topMessage flex_wrap row_between">
                                <view class="flex_wrap row_middle">
                                    <u-image
                                        :src="item.avatar || MissingAvatar"
                                        width="130rpx"
                                        height="130rpx"
                                        bgColor="#eee"
                                        shape="circle"
                                    />
                                    <view class="flex_wrap flex_column">
                                        <view style="margin-left: 20rpx">
                                            <u-text
                                                :text="
                                                    item.businessNote ||
                                                    '未备注'
                                                "
                                                color="#333"
                                                bold
                                                size="40rpx"
                                            />
                                            <u-gap height="10rpx" />
                                            <view
                                                style="
                                                    display: inline-block;
                                                    max-width: 240rpx;
                                                "
                                            >
                                                <u-tag
                                                    bgColor="rgba(147, 182, 254, 0.5)"
                                                    color="#333"
                                                    size="mini"
                                                    :text="
                                                        item.nickName ||
                                                        '微信用户'
                                                    "
                                                    borderColor="rgba(0,0,0,0)"
                                                />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <view style="margin-top: 20rpx">
                                    <u-text
                                        text="修改备注"
                                        size="24rpx"
                                        color="rgba(51, 51, 51, 1)"
                                        prefixIcon="/static/img/conference/edit.png"
                                        iconStyle="width:32rpx;height:32rpx"
                                        @click="openEditModal(item)"
                                    />
                                </view>
                            </view>
                            <view class="bottomMessage flex_wrap row_between">
                                <view class="left"
                                    ><u-text
                                        :text="`手机号: ${item.mobile || '--'}`"
                                        size="26rpx"
                                        color="#333"
                                        mode="phone"
                                /></view>
                                <view class="right"
                                    ><u-text
                                        :text="`签到时间: ${$u.timeFormat(
                                            item.createTime,
                                            'mm/dd hh:MM'
                                        )}`"
                                        size="26rpx"
                                        color="#333"
                                        align="right"
                                /></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>

        <u-modal
            :show="showEditModal"
            ref="editModal"
            title="修改备注"
            showCancelButton
            @confirm="confirmEdit"
            @cancel="cancelEdit"
        >
            <view slot="default" style="width: 100%">
                <u--form
                    ref="editForm"
                    labelPosition="left"
                    :rules="rules"
                    :model="editForm"
                    labelWidth="0"
                >
                    <u-form-item prop="info" borderBottom ref="item">
                        <u-input
                            v-model="editForm.info"
                            border="none"
                            placeholder="请输入客户姓名"
                            :customStyle="{ paddingLeft: '20rpx' }"
                            clearable
                        />
                    </u-form-item>
                </u--form>
            </view>
        </u-modal>
    </view>
</template>

<script>
import {
    listSignInByMeetId,
    updateNote,
    getHaveSignedUpForTheMeetListByMeetId,
    listCustomerSignUp,
    salesManMeetingSignInUpdateNote,
} from "@/api/salesmanMeeting.js";

export default {
    data() {
        return {
            constList: {
                3: {
                    title: "客户签到列表",
                    name: "我的客户签到",
                    background: require("static/img/conference/type3bg.png"),
                    type: 3,
                    bg: "#4992FA",
                },
                2: {
                    title: "客户报名列表",
                    name: "我的客户报名",
                    background: require("static/img/conference/type2bg.png"),
                    type: 2,
                    bg: "#48C4CF",
                },
                1: {
                    title: "业务员报名列表",
                    name: "我的业务员报名",
                    background: require("static/img/conference/type1bg.png"),
                    type: 1,
                    bg: "#FF8A33",
                },
            },
            MissingAvatar: "/static/img/conference/MissingAvatar.png",
            detailDate: {},
            keyword: "",
            actionStyle: {
                fontSize: "32rpx",
                color: "#588BF3",
            },
            type: null,
            showEditModal: false,
            refresherStatus: 0,
            dataList: [],
            inputStyle: {
                fontSize: "24rpx",
            },
            currentRecord: null,
            meetId: "",
            total: 0,
            rules: {
                info: [
                    {
                        type: "string",
                        message: "请输入客户姓名",
                        trigger: ["change", "blur"],
                    },
                ],
            },
            editForm: { info: "" },
        };
    },
    onLoad(options) {
        this.meetId = options.meetId;
        this.type = options.type;
        this.salesmanId =
            options.salesmanId || this.$store.getters?.userInfo.id;
        this.detailDate = this.constList[options.type];
        uni.setNavigationBarTitle({
            title: this.detailDate?.title ?? "",
        });
        uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: this.detailDate?.bg ?? "",
            animation: {
                duration: 500,
            },
        });
    },
    onReady() {
        this.$refs.editForm.setRules(this.rules);
    },
    methods: {
        goToList(type, item) {
            uni.$u.route({
                url: "/pages_conferenceDetail/signList/index",
                params: {
                    type,
                    meetId: this.meetId,
                    salesmanId: item.id,
                },
            });
        },
        async queryList(pageNo, pageSize) {
            const params = {
                meetId: this.meetId,
                salesmanId: this.salesmanId,
                pageNum: pageNo,
                pageSize: pageSize,
            };
            const that = this;
            let result;
            switch (that.type) {
                case "1":
                    params.query = that.keyword;
                    result = await getHaveSignedUpForTheMeetListByMeetId(
                        params
                    );
                    !params.query && (this.total = result?.data?.total);
                    break;
                case "2":
                    params.parameter = that.keyword;
                    result = await listCustomerSignUp(params);
                    !params.parameter && (this.total = result?.data?.total);
                    break;
                case "3":
                    params.query = that.keyword;
                    params.meetSignId = this.meetId;
                    result = await listSignInByMeetId(params);
                    !params.query && (this.total = result?.data?.total);
                    break;
                default:
                    params.query = that.keyword;
                    params.meetSignId = this.meetId;
                    result = await listSignInByMeetId(params);
                    !params.query && (this.total = result?.data?.total);
            }
            await that.$refs.paging.completeByTotal(
                result?.data?.rows ?? [],
                result?.data?.total
            );
        },
        openEditModal(item) {
            this.currentRecord = item;
            this.showEditModal = true;
        },
        cancelEdit() {
            this.$refs.editForm.resetFields();
            this.$refs.editForm.clearValidate();
            this.editForm.info = "";
            this.showEditModal = false;
        },
        keywordSearch() {
            this.$refs.paging.reload();
        },
        toAdvisor(e) {
            uni.navigateTo({
                url: "/pages_my/myCard/index?salesmanId=" + e.id,
            });
        },
        async confirmEdit() {
            const that = this;
            this.$refs.editForm
                .validate()
                .then(async () => {
                    const params = {
                        id: that.currentRecord.id,
                        note: that.editForm.info,
                    };
                    let res =
                        this.type === "2"
                            ? await salesManMeetingSignInUpdateNote(params)
                            : await updateNote(params);
                    await uni.$u.toast("更新成功");
                    await that.$refs.paging.reload();
                    await that.cancelEdit();
                })
                .catch((errors) => {
                    uni.$u.toast("校验失败");
                });
        },
    },
};
</script>
<style>
page {
    background-color: #fff !important;
}
</style>

<style lang="scss" scoped>
.signList {
    ::v-deep.u-line {
        height: auto !important;
    }
    position: relative;
}
.pepole {
    padding-left: 100rpx;
    padding-bottom: 100rpx;
}
.top {
    width: 100%;
    height: 327rpx;
    width: 100%;
    background-size: cover;
    background-position-y: bottom;
}
.search {
    padding: 30rpx 20rpx 30rpx 20rpx;
    background-color: #fff;
}
.scrollViews {
    width: 100%;
    padding: 30upx 28upx 0 28upx;
    box-sizing: border-box;
    border-radius: 60rpx 60rpx 0rpx 0rpx;
    background-color: #fff;
    margin-top: -74rpx;
    .item {
        width: 100%;
        height: auto;
        box-shadow: 0 0 12upx 2upx rgba(0, 0, 0, 0.08);
        border-radius: 12rpx;
        background-color: #fff;
        margin-bottom: 20upx;
        .topMessage {
            padding: 20upx;
            border-bottom: 1px solid #dddadf;
        }
        .bottomMessage {
            padding: 20upx;
            box-sizing: border-box;
        }
        .left {
        }
        .right {
        }
    }
}

/* 其他顾问 */
.else_enterprise {
    // padding: 20rpx 20rpx;

    margin-top: 12rpx;
    padding: 32rpx;
    background: linear-gradient(
        135deg,
        #deebf9 0%,
        rgba(255, 255, 255, 0) 100%
    );
    .list1,
    .list2 {
        width: 134rpx;
        height: 48rpx;
        color: #fff;
        text-align: center;
        line-height: 48rpx;
        background: linear-gradient(90deg, #74adff 0%, #4992fa 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 28rpx;
        margin-right: 20rpx;
    }
    .list2 {
        background: linear-gradient(90deg, #58eaf7 0%, #48c4cf 100%);
    }
}
.el_adviser_info_info {
    display: flex;
    align-items: center;
}
.el_adviser_info_img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin: 0 20rpx;
}
button::after {
    border: none;
    border-radius: 0;
}
.adviser_info,
.adviser_else {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    color: #333;
    justify-content: space-between;
}
.adviser_info_img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 16rpx;
}
</style>
